extends layout

block declarations
    - body_class = 'initialSetup';
    - include_validation = true;

block additional_css
    link(rel='stylesheet', href='/setup/css/style.css')
    link(rel='stylesheet', href='/settings/css/style.css')

block additional_scripts
    script(src="/settings/js/jquery.mcjs.settings.js")
    script.
        $(function() {
            var userLang = navigator.language || navigator.userLanguage;
            userLang = userLang.replace(/-.*/,'');
            if(userLang.match(/nl|en|fr|da|de|pt|sv|tr|it|ru|ua|es/g)){
                $('input#language').val(userLang);
            } else{
                $('input#language').val('en');
            }

            var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
            if(isMac){
                $('input#platform').val('OSX');
            }
        });

block body
    #header
        .container
            .row
                h1(style="width:100%") Hi, Please setup MediacenterJS
    .container
        input.oauthKeyHidden(name="oauthKey" type="hidden")
        form#setup.validate-form.form-horizontal(action='/setuppost',method='post')
            .form-group.mcjs-rc-controllable
                span.info.col-md-5
                    span.quote &ldquo;
                    span Please provide the location of your media. You can always add or alter these settings from the settings panel. An app will become accessible once a valid path is given.
                    span.quote &rdquo;
            .form-group.mcjs-rc-controllable
                label.col-md-2(for="moviepath") Specify movie location
                .col-md-10
                    .input-group
                        span.input-group-addon
                            i.folder.icon
                        input#moviepath.mcjs-rc-clickable.form-control(name="moviepath",type="text", placeholder="C:/temp/ or /mnt/media/hdd/movies/", data-rule-path="true",  data-msg-path="Specify a valid path.")
            .form-group.mcjs-rc-controllable
                label.col-md-2(for="musicpath") Specify music location
                .col-md-10
                    .input-group
                        span.input-group-addon
                            i.folder.icon
                        input#musicpath.mcjs-rc-clickable.form-control(name="musicpath",type="text", placeholder="C:/temp/ or /mnt/media/hdd/music/", data-rule-path="true",  data-msg-path="Specify a valid path.")
            .form-group.mcjs-rc-controllable
                label.col-md-2(for="tvpath") Specify tvshow location
                .col-md-10
                    .input-group
                        span.input-group-addon
                            i.folder.icon
                        input#tvpath.mcjs-rc-clickable.form-control(name="tvpath",type="text", placeholder="C:/temp/ or /mnt/media/hdd/music/", data-rule-path="true",  data-msg-path="Specify a valid path.")
            .form-group.mcjs-rc-controllable
                label.col-md-2(for="location") You current location (city) *
                .col-md-10
                    .input-group
                        span.input-group-addon
                            i.globe.icon
                        input#location.mcjs-rc-clickable.form-control(name="location",type="text", placeholder="ie london or amsterdam",data-rule-required="true", data-msg-required="This field is required.")
            .form-group.mcjs-rc-controllable
                label.col-md-2(for="country") Country
                .col-md-10
                    .input-group
                        span.input-group-addon
                            i.flag.icon
                        select.form-control#country.mcjs-rc-clickable(name="country")
                            - for cntry, cntryCode in countries
                                option(value=cntryCode, selected=cntryCode === country) #{cntry}
            .form-group.mcjs-rc-controllable
                label.col-md-2(for="port") Port *
                .col-md-10
                    .input-group
                        span.input-group-addon
                            i.exchange.icon
                        input#port.mcjs-rc-clickable.form-control(name="port",type="text", placeholder="ie 3000 or 1337", data-rule-required="true", data-msg-required="This field is required.")
            .form-group.mcjs-rc-controllable
                .col-md-10
                    input.btn.mcjs-rc-clickable(type="submit",value="Submit", style="display:inline-block; margin-left:150px;")
                    input(name="screensaver",type="hidden",value="dim")
                    input#language(name="language",type="hidden",value="en")
                    input#platform(name="platform",type="hidden",value="")
                    input(name="theme",type="hidden",value="wigo")
                    input(name="spotifyUser",type="hidden",value="")
                    input(name="spotifyPass",type="hidden",value="")
            .form-group.mcjs-rc-controllable
                label * = required
